<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>笑脸</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas id="can" width="500px" height="500px"></canvas>
</body>
<script>

    // 笑脸
    // let canva = document.querySelector('#can')
    // let context = canva.getContext('2d');
    // context.beginPath();
    // context.arc(200, 150, 100, 0,2*Math.PI);
    // context.stroke(); //开始绘画
    // context.font='20px Arial';
    // context.strokeText('111111111', 160, 90,); //给盒子写文本
    // // 第一个眼睛
    // context.beginPath();
    // context.arc(155, 130, 20, 0,2*Math.PI);
    // context.stroke(); //开始绘画
    // context.fillStyle='#f69';
    // context.fill();
    // context.closePath();
    // // 第二个眼睛
    // context.beginPath();
    // context.arc(250, 130, 20, 0,2*Math.PI);
    // context.stroke(); //开始绘画
    // context.fillStyle='#f69';
    // context.fill();
    // context.closePath();
        
    // // 嘴巴
    // context.beginPath();
    // context.arc(205, 180, 30, 0,1*Math.PI);
    // context.stroke(); //开始绘画


    // 折线
    // let canva = document.querySelector('#can')
    // let context = canva.getContext('2d');
    // context.beginPath();

    // context.moveTo(200, 200);
    // context.lineTo(200, 100);

    // context.moveTo(200, 100);
    // context.lineTo(260, 100);
    
    // context.stroke();
    
    // context.closePath();
    
    
</script>
</html>